<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Display a map on a webpage</title>
		<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta http-equiv="Access-Control-Allow-Origin" content="*" />
		<!-- Load Leaflet from CDN -->
	    <!-- Load Leaflet from CDN -->
	    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
	       integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
	       crossorigin=""/>
	    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
	       integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
	       crossorigin=""></script>	
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="stylesheet" href="css/bootstrap-icons.css">
		<script src="js/jquery-3.6.0.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<link rel="stylesheet" href="css/mapstyle.css"/>
		<script src="js/FirstMap.js"></script>
	</head>
	<body onload="init()">
	    
		 <nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
		      <div class="navbar-header" >
		      	<a class="navbar-brand" > 
		      		<i class="bi-globe" role="img" aria-label="globe"></i> 
		      		<span class="logo">&nbsp;轻量级WebGIS入门实例</span>
		      	</a>
		      </div>
			  <div class="container-fluid ">
		        <!-- <a class="navbar-brand" href="#">Navbar</a> -->
		        <div class="collapse navbar-collapse" id="navbarsExample09">
		                  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
		                    <li class="nav-item">
		                      <a class="nav-link active" aria-current="page" href="LeafletFirstMap.html">Home</a>
		                    </li>
		                    <li class="nav-item">
		                      <a class="nav-link" href="MapboxFirstMap.html">MapBoxExample</a>
		                    </li>
		                    
		                    <li class="nav-item dropdown">
								<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								  MapAPI
								</a>
								<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
								  <a class="dropdown-item" href="https://leafletjs.com/" target="_blank">Leaflet</a>
								  <a class="dropdown-item" href="https://www.mapbox.com/" target="_blank">MapBox</a>
								  <a class="dropdown-item" href="https://www.osgeo.org/projects/openlayers/" target="_blank">Openlayers</a>
								</div>
							  </li>
		                  </ul>
		                </div>
					<ul class="nav navbar-nav navbar-right">
						<a class="btn btn-default" href="login.html" data-toggle="tooltip" data-placement="left" title="登录">
						  <i class="bi-person-fill" role="img" aria-label="person"></i>
						</a>
						<a class="btn btn-default" href="reg.html" data-toggle="tooltip" data-placement="left" title="注册">
							  <i class="bi bi-person-plus-fill"></i>
						</a>
						<a class="btn btn-default" data-toggle="modal" data-target="#Modal_Contact" data-toggle="tooltip" data-placement="left" title="联系我们">
							  <i class="bi bi-envelope-fill"></i>
						</a>
					</ul>
					
		      </div>
		    </nav>
		
		<div id='map'></div>
		<div class="modal fade  bs-example-modal-lg" id="Modal_Contact" tabindex="-1" role="dialog" aria-labelledby="Modal_ContactLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="Modal_ContactLabel" align="center">联系我们</h4>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				</div><!-- / .modal-header-->
				<div class="modal-body">
					<ul class="list-group">
						<li class="list-group-item">电话：027-88661699-8103</li>
						<li class="list-group-item">Email: lizy.hbu@qq.com</li>
						<li class="list-group-item">© 版权所有：湖北大学资源环境学院. All right reserved.</li>
					</ul>
				</div><!-- / .modal-body-->
						<div class="modal-footer" align="center">
						</div><!-- / .modal-footer-->
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog-->
		
	</body>
</html>